
<template>
    <div class="grid-card">
        <div class="grid-card-header">{{title}}</div>
        <div class="grid-card-body">
            <el-row class="grid-card-carousel">
                <el-col :span="24">
                    <radio-model v-model="modelSelect" :dataList='datalist'></radio-model>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    import base from './base.js';
    import RadioModel from '../ui/Radio.vue';
    export default {
        extends: base,
        name: "GridOne",
        props: {},
        components: {
            RadioModel
        },
        watch: {
            modelSelect: function (newValue) {
                console.info('传出来的值快件信息索引', newValue)
            }
        },
        data() {
            return {
                modelSelect: '',
                datalist: [
                    {name: '待取件', label: '0'},
                    {name: '取件 - 中转', label: '1'},
                    {name: '中转件', label: '2'},
                    {name: '待派送', label: '3'},
                    {name: '派送中', label: '4'},
                    {name: '已派送', label: '5'}
                ]
            }
        }
    }
</script>

<style scoped lang="less">
    .grid-card {
        width: 100%;
        min-width: 300px;
        .grid-card-header {
            height: 43px;
            line-height: 43px;
            padding: 0 15px;
            border-bottom: 1px solid #f6f6f6;
            font-size: 16px;
            color: #000;
            border-radius: 2px 2px 0 0;
        }
        .grid-card-body{
            position: relative;
            padding: 10px 15px;
            line-height: 24px;
            .grid-card-carousel{
                text-align: center;
                .model-radio{
                    margin-top: 0px;
                }
            }
        }
    }
</style>
